<!--
 * @Description: 课堂教学评价表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-02 11:21:14
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" v-loading="loading">
      <div class="table_title">课堂教学评价表</div>

      <table>
        <tr>
          <td colspan="4" style="text-align:left">
            <div class="col_text">
              <span>培训班名称：</span>
              <span>
                <input
                  type="text"
                  style="width:100%"
                  v-model="dataForm.className"
                />
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:left">
            <div class="col_text_teacher">
              <span>授课教师：</span>
              <span>
                <input type="text" style="width:100%" v-model="dataForm.skjs"
              /></span>
              <span>
                <el-radio v-model="radio" label="z">专职</el-radio>
                <el-radio v-model="radio" label="j">兼职</el-radio>
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:left">
            <div class="col_text">
              <span>课程名称：</span>
              <span>
                <input type="text" style="width:100%" v-model="dataForm.kcmc"
              /></span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:left">
            <div class="col_text_time">
              <span>授课时间：</span>
              <span>
                <!-- <input type="text" style="width:100%" v-model="dataForm.sksj"
              /> -->
                <el-date-picker
                  v-model="dataForm.sksj"
                  type="daterange"
                  range-separator="~"
                  value-format="yyyy-MM-dd"
                  size="mini"
                  width="100%"
                >
                </el-date-picker>
              </span>
              <span>授课地点：</span>
              <span
                ><input type="text" style="width:50%" v-model="dataForm.skdd"
              /></span>
            </div>
          </td>
        </tr>
        <tr>
          <td width="70px">
            序号
          </td>
          <td width="610px">
            评 价 项 目
          </td>
          <td width="70px">
            分值
          </td>
          <td>
            评价
          </td>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td width="70px">
            {{ item.xh }}
          </td>
          <td width="610px" style="text-align:left">
            {{ item.pjxm }}
          </td>
          <td width="70px">
            {{ item.fz }}
          </td>
          <td width="70px">
            <input
              type="text"
              style="width:100%;text-align:center"
              v-model="item.pj"
              @input="handleInput(item)"
            />
          </td>
        </tr>
        <tr>
          <td colspan="3" width="70px">
            总分
          </td>
          <td>
            {{ total }}
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align:left">
            <div class="col_signature">
              <div>对教学内容及其他方面的具体意见或建议：</div>
              <div class="jianyi">
                <textarea
                  style="width:100%; height:150px"
                  v-model="dataForm.djx"
                ></textarea>
              </div>
              <div class="qianming">
                <div>
                  评价人(签名)：
                  <input type="text" style="width:20%" v-model="dataForm.pjr" />
                </div>
                <br />
                <span>
                  <span
                    >日期：
                    <el-date-picker
                      v-model="rq"
                      type="date"
                      value-format="yyyy-MM-dd"
                      size="mini"
                      style="width:20%"
                    >
                    </el-date-picker>
                  </span>
                </span>
              </div>
            </div>
          </td>
        </tr>
      </table>

      <div class="table_bottom">
        注：此表由培训机构教学质量督导人员填写。
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule12",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: [
        {
          xh: 1,
          pjxm: "讲课有热情，精神饱满， 用普通话授课。",
          fz: 10,
          pj: ""
        },
        {
          xh: 2,
          pjxm: "讲课有感染力， 能吸引学员的注意力。",
          fz: 8,
          pj: ""
        },
        {
          xh: 3,
          pjxm: "对问题的阐述深入浅出， 重点突出， 思路清晰，有启发性。",
          fz: 7,
          pj: ""
        },
        {
          xh: 4,
          pjxm: "对课程内容娴熟，采用的教学方式方法恰当。",
          fz: 15,
          pj: ""
        },
        {
          xh: 5,
          pjxm: "讲述内容充实， 信息量大。",
          fz: 15,
          pj: ""
        },
        {
          xh: 6,
          pjxm: "教学内容能反映或联系本行业生产实际。",
          fz: 5,
          pj: ""
        },
        {
          xh: 7,
          pjxm: "采用案例、实例等方式进行讲解教学。",
          fz: 10,
          pj: ""
        },
        {
          xh: 8,
          pjxm: "采用案例、实例等方式进行讲解教学。",
          fz: 10,
          pj: ""
        },
        {
          xh: 9,
          pjxm: "整个教学过程采用多媒体等手段实施教学。",
          fz: 10,
          pj: ""
        },
        {
          xh: 10,
          pjxm: "备课充分(教案规范、了解学员状况、教具运用合理等)",
          fz: 10,
          pj: ""
        }
      ],
      radio: "z",
      rq: ""
    };
  },
  created() {},
  computed: {
    total() {
      let total = 0;
      this.list.forEach(item => {
        total += Number(item.pj);
      });
      return total;
    }
  },
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA12/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        this.loading = false;
      });
    },
    exportWord() {
      let rqArr = this.rq.split("-");
      this.dataForm.y = rqArr[0];
      this.dataForm.m = rqArr[1];
      this.dataForm.d = rqArr[2];
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = this.dataForm[key].join(",");
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm.zf = this.total.toString();
      this.list.forEach(item => {
        this.dataForm[`p${item.xh}`] = item.pj;
      });
      this.dataForm[this.radio] = "√";
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA12Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "课堂教学评价表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    handleInput(item) {
      item.pj = item.pj.replace(/[^\d]/g, "");
      if (item.pj > item.fz) {
        item.pj = item.fz;
      }
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "./TABLESTYLE.scss";
.col_text {
  span {
    &:nth-of-type(2) {
      width: 260px;
      display: inline-block;
    }
  }
}
.col_text_teacher {
  span {
    &:nth-of-type(2) {
      width: 50%;
      display: inline-block;
    }
  }
}
.col_text_time {
  span {
    &:nth-of-type(2) {
      width: 40%;
      display: inline-block;
      ::v-deep.el-input__inner {
        width: 100%;
        text-align: center !important;
        font-size: 14px !important;
        color: #000000 !important;
        height: 100% !important;
      }
    }
    &:nth-of-type(4) {
      width: 30% !important;
      input {
        width: 30% !important;
      }
    }
  }
}

.col_signature {
  // height: 245px;
  .jianyi {
    width: 100%;
    height: 150px;
  }
  .qianming {
    width: 100%;
    // height: 50px;
    text-align: right;
  }
}
</style>
